<template>
    <div class="layout">
        <div class="layout-content" style="margin-top: 30px;">
            <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-top: 20px; margin-left: 40px;">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/manage/manageCourse' }">课程列表</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/manage/manageCourseDetail' }">课程管理</el-breadcrumb-item>
            </el-breadcrumb>
            <Divider></Divider>
            <Row style="margin-top: 20px;">
                <i-col span="4" style="margin-left: 20px;">
                    <el-menu active-key="1" width="auto" :open-keys="['1']" @open="handleOpen" @close="handleClose">
                        <el-menu-item key="1-1" style="font-size: 20px;" @click="jumpTo('1')">课程基本信息</el-menu-item>
                        <el-menu-item key="1-2" style="font-size: 20px;" @click="jumpTo('2')">课程视频管理</el-menu-item>
                        <el-menu-item key="1-3" style="font-size: 20px;" @click="jumpTo('3')">选课学生管理</el-menu-item>
                    </el-menu>
                </i-col>
                <i-col span="18">
                    <div class="layout-content-main">
                        <CourseManage v-show="opt == '1'"></CourseManage>
                        <VideoManage v-show="opt == '2'"></VideoManage>
                        <StudentManage v-show="opt == '3'"></StudentManage>
                    </div>
                </i-col>
            </Row>
        </div>
    </div>
</template>
<script>
    import VideoManage from "../../components/VideoManage";
    import CourseManage from "../../components/CourseManage"
    import StudentManage from "../../components/StudentManage"
    export default {
        name: "manageCourseDetail",
        components: { VideoManage, CourseManage, StudentManage },
        data() {
        return {
                opt: '3'
            };
        },
        props:{
            courseId:{
                default: '1111'
            }
        },
        methods: {
            jumpTo: function(opt) {
                this.opt = opt
            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
        },
        mounted() {
            console.log("courseId: ",this.courseId)
        },
    }
</script>

<style scoped>
    .layout{
        border: 1px solid #d7dde4;
        background: #f5f7f9;
    }
    .layout-logo{
        width: 100px;
        height: 30px;
        background: #5b6270;
        border-radius: 3px;
        float: left;
        position: relative;
        top: 15px;
        left: 20px;
    }
    .layout-nav{
        width: 420px;
        margin: 0 auto;
    }
    .layout-assistant{
        width: 300px;
        margin: 0 auto;
        height: inherit;
    }
    .layout-breadcrumb{
        padding: 10px 15px 0;
    }
    .layout-content{
        min-height: 200px;
        margin: 15px;
        overflow: hidden;
        background: #fff;
        border-radius: 4px;
    }
    .layout-content-main{
        padding: 10px;
    }
    .layout-copy{
        text-align: center;
        padding: 10px 0 20px;
        color: #9ea7b4;
    }
</style>
